<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <%- include('./common/meta.ejs', { title: '商品详情' }) %>

</head>
<body class="bg-gray-50">
  <!-- 导航栏 -->
  <%- include('./partials/header.ejs') %>

  <div class="main-container">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
      <div class="flex space-x-4">
        <!-- 分类下拉组件 -->
        <%- include('./components/categories-dropdown.ejs', { categories }) %>
        
        <!-- 搜索框 -->
        <div class="flex-1">
          <div class="relative">
            <input type="text" 
                   class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-red-500" 
                   placeholder="搜索商品">
            <button class="absolute right-0 top-0 mt-2 mr-3">
              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 面包屑导航 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
      <div class="flex items-center space-x-2 text-sm text-gray-500">
        <% breadcrumb.forEach((item, index) => { %>
          <% if (index !== breadcrumb.length - 1) { %>
            <a href="<%= item.url %>" class="hover:text-gray-900"><%= item.name %></a>
            <span class="text-gray-400">/</span>
          <% } else { %>
            <span class="text-gray-900"><%= item.name %></span>
          <% } %>
        <% }) %>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="bg-white rounded-lg shadow">
        <div class="grid grid-cols-2 gap-8 p-8">
          <!-- 商品图片 -->
          <div class="space-y-4">
            <div class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden">
              <img src="<%= goods.mainPic %>" alt="<%= goods.title %>" class="w-full h-full object-center object-cover" id="mainImage">
            </div>
            <div class="grid grid-cols-5 gap-4" id="thumbnailContainer">
              <% (goods.pics || []).forEach(pic => { %>
                <button class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                  <img src="<%= pic %>" alt="" class="w-full h-full object-center object-cover thumbnail-img">
                </button>
              <% }) %>
            </div>
          </div>

          <!-- 商品信息 -->
          <div class="space-y-6">
            <div>
              <h1 class="text-2xl font-bold text-gray-900"><%= goods.title %></h1>
              <% if (goods.subTitle) { %>
                <p class="mt-1 text-lg text-gray-500"><%= goods.subTitle %></p>
              <% } %>
            </div>
            
            <!-- 价格信息 -->
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="flex items-baseline space-x-3">
                <span class="text-3xl font-bold text-red-600">¥<%= goods.price %></span>
                <span class="text-sm text-gray-500">已售 <%= goods.sold %></span>
              </div>
            </div>

            <!-- 商品规格 -->
            <% if (goods.specs && goods.specs.length > 0) { %>
              <div class="space-y-4">
                <% goods.specs.forEach(spec => { %>
                  <div>
                    <h3 class="text-sm font-medium text-gray-900 mb-3"><%= spec.name %></h3>
                    <div class="flex flex-wrap gap-3">
                      <% spec.values.forEach(value => { %>
                        <button 
                          class="px-4 py-2 text-sm border rounded-lg hover:border-red-500 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                          onclick="selectSpec('<%= spec.name %>', '<%= value %>')"
                        >
                          <%= value %>
                        </button>
                      <% }) %>
                    </div>
                  </div>
                <% }) %>
              </div>
            <% } %>

            <!-- 购买按钮 -->
            <div class="flex space-x-4">
              <button id="buyNowBtn" class="flex-1 bg-red-600 text-white py-3 px-8 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                立即购买
              </button>
              <button id="addToCartBtn" class="flex-1 border border-red-600 text-red-600 py-3 px-8 rounded-lg hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                加入购物车
              </button>
            </div>

            <!-- 商品状态 -->
            <% if (goods.status === 0) { %>
              <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div class="flex">
                  <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                  </div>
                  <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">商品已下架</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                      <p>该商品暂时无法购买，请浏览其他商品。</p>
                    </div>
                  </div>
                </div>
              </div>
            <% } %>
          </div>
        </div>

        <!-- 商品详情 -->
        <div class="border-t">
          <div class="p-8">
            <h2 class="text-lg font-medium text-gray-900 mb-6">商品详情</h2>
            <div class="prose max-w-none">
              <%- goods.content %>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div class="mt-12">
        <h2 class="text-lg font-medium text-gray-900 mb-6">相关推荐</h2>
        <div class="grid grid-cols-4 gap-6">
          <% (recommendGoods || []).forEach(item => { %>
            <div class="group">
              <div class="aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden">
                <img src="<%= item.mainPic %>" alt="<%= item.title %>" class="w-full h-full object-center object-cover group-hover:opacity-75">
              </div>
              <div class="mt-4 space-y-1">
                <h3 class="text-sm text-gray-900"><%= item.title %></h3>
                <% if (item.subTitle) { %>
                  <p class="text-sm text-gray-500"><%= item.subTitle %></p>
                <% } %>
                <p class="text-sm font-medium text-gray-900">¥<%= item.price %></p>
              </div>
            </div>
          <% }) %>
        </div>
      </div>
    </div>
  </div>

    <!-- 页脚 -->
    <footer class="bg-gray-100 border-t border-gray-200">
      <div class="max-w-screen-xl mx-auto px-4 py-12 md:py-16">
        <%- include('partials/newsletter-signup') %> <%-
        include('partials/footer-links') %> <%-
        include('partials/footer-bottom') %>
      </div>
    </footer>

    <!-- 回到顶部组件 -->
    <%- include('partials/back-to-top') %>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    // 图片预览功能
    const mainImage = document.getElementById('mainImage');
    const thumbnails = document.querySelectorAll('.thumbnail-img');
    
    thumbnails.forEach(thumb => {
      thumb.addEventListener('click', function() {
        mainImage.src = this.src;
      });
    });

    // 规格选择
    let selectedSpecs = {};
    
    window.selectSpec = function(name, value) {
      selectedSpecs[name] = value;
      // 更新按钮样式
      const buttons = document.querySelectorAll(`button[onclick*="${name}"]`);
      buttons.forEach(button => {
        if (button.textContent.trim() === value) {
          button.classList.add('border-red-500', 'text-red-600');
        } else {
          button.classList.remove('border-red-500', 'text-red-600');
        }
      });
    };

    // 购买按钮
    const buyNowBtn = document.getElementById('buyNowBtn');
    const addToCartBtn = document.getElementById('addToCartBtn');

    function validateSpecSelection() {
      const specs = <%- JSON.stringify(goods.specs || []) %>;
      const missingSpecs = specs.filter(spec => !selectedSpecs[spec.name]);
      if (missingSpecs.length > 0) {
        alert(`请选择${missingSpecs[0].name}`);
        return false;
      }
      return true;
    }

    buyNowBtn.addEventListener('click', function() {
      if (!validateSpecSelection()) return;
      // TODO: 实现购买逻辑
      window.location.href = '/order/confirm';
    });

    addToCartBtn.addEventListener('click', function() {
      if (!validateSpecSelection()) return;
      // TODO: 实现加入购物车逻辑
      alert('已加入购物车');
    });
  });
  </script>
</body>
</html> 